<template>
  <page-header-wrapper v-loading="loading">
    <page-tab-list></page-tab-list>

    <a-card :bordered="false">
      <a-form-model
        ref="wechatForm"
        :rules="wechatRules"
        :model="wechatInfo"
        :labelCol="{ span: 3 }"
        :wrapperCol="{ span: 17 }"
      >
        <h4>供货商佣金比例设置</h4>
        <a-form-model-item label="省代佣金比例" prop="supplier_province_percent">
          <a-input-number :min="0" :precision="2" :step="0.01" v-model="wechatInfo.supplier_province_percent" />
          <em> %</em>
        </a-form-model-item>
        <a-form-model-item label="市代佣金比例" prop="supplier_city_percent">
          <a-input-number :min="0" :precision="2" :step="0.01" v-model="wechatInfo.supplier_city_percent" />
          <em> %</em>
        </a-form-model-item>
        <a-form-model-item label="区代佣金比例" prop="supplier_district_percent">
          <a-input-number :min="0" :precision="2" :step="0.01" v-model="wechatInfo.supplier_district_percent" />
          <em> %</em>
        </a-form-model-item>
        <!-- <a-form-model-item label="运营模式设置" prop="model_type">
          <a-radio-group v-model="wechatInfo.model_type">
            <a-radio :value="0">市级运营</a-radio>
            <a-radio :value="1">区县级运营</a-radio>
          </a-radio-group>
        </a-form-model-item> -->
        <h4>店铺佣金比例设置</h4>
        <a-form-model-item label="省代佣金比例" prop="province_percent">
          <a-input-number :min="0" :precision="2" :step="0.01" v-model="wechatInfo.province_percent" />
          <em> %</em>
        </a-form-model-item>
        <a-form-model-item label="市代佣金比例" prop="city_percent">
          <a-input-number :min="0" :precision="2" :step="0.01" v-model="wechatInfo.city_percent" />
          <em> %</em>
        </a-form-model-item>
        <a-form-model-item label="区代佣金比例" prop="district_percent">
          <a-input-number :min="0" :precision="2" :step="0.01" v-model="wechatInfo.district_percent" />
          <em> %</em>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 12, offset: 2 }">
          <a-button :loading="btnLoading" type="primary" @click="submitForm"> 保存 </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { setAgencyPriceConfig, agencyPriceConfig } from '@/api/saas/setting'
export default {
  name: 'SaasAgencySetting',
  data() {
    return {
      loading: false,
      btnLoading: false,
      wechatInfo: {
        province_percent:'',
        city_percent:'',
        district_percent:'',
        supplier_province_percent:"",
        supplier_city_percent:'',
        supplier_district_percent:'',
        model_type:'0',
      },

      wechatRules:{
        model_type: [{ required: true, message: '请选择运营模式', trigger: 'change' }],
        district_percent: [{ required: true, message: '请输入省代佣金比例', trigger: 'blur' }],
        city_percent: [{ required: true, message: '请输入省代佣金比例', trigger: 'blur' }],
        province_percent: [{ required: true, message: '请输入省代佣金比例', trigger: 'blur' }],
        supplier_district_percent: [{ required: true, message: '请输入省代佣金比例', trigger: 'blur' }],
        supplier_city_percent: [{ required: true, message: '请输入省代佣金比例', trigger: 'blur' }],
        supplier_province_percent: [{ required: true, message: '请输入省代佣金比例', trigger: 'blur' }],
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
    }
  },

  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      agencyPriceConfig()
        .then((res) => {
          if (res.code === 0) {
            this.$nextTick(() => {
              this.wechatInfo = res.data
            })
          }
        })
        .catch((error) => {
          console.log(error)
        })
        .then(() => {
          this.loading = false
        })
    },

    submitForm () {
      this.$refs.wechatForm.validate((valid) => {
        if (valid) {
          this.btnLoading = true
          setAgencyPriceConfig(this.wechatInfo)
            .then((res) => {
              if (res.code == 0) {
                this.$message.success('保存成功！')
              } else {
                this.$message.warning(res.msg ? res.msg : '保存失败！')
              }
            })
            .catch((error) => {
              console.log(error)
            })
            .then(() => {
              this.btnLoading = false
            })
          }
        })
    },
  },
}
</script>

<style lang="less" scoped>
h4{
  font-size: 16px;
  font-weight: bold;
}
</style>